<template>
	<view v-if="appType === 'app-tch' || appType === 'mp-tch'" class="tabbar">
		<banner-view :height="300" position="1"></banner-view>
		<view class="action-view">
			<view class="action-item" @click="fabClick">
				发班级圈
			</view>
			<view class="action-item" @click="albumClick">
				班级相册
			</view>
		</view>
		<feed ref="feed" :isCourse="false"></feed>
	</view>
	<view v-else-if="appType === 'app-p' || appType === 'mp-p'">
		<view class="btn-wx">
			<u-button v-if="btnShow" type="success" @click="gotoMt">打开小程序</u-button>
		</view>
		<view class="test-container">
		    <!-- 这里面写自己想要的样式 -->
		    <text style="font-size: 25px;">
				<button class="btn" style="margin:0 100px;background-color:  #07c160;color: white;">打开小程序</button>
			</text>
		    <wx-open-launch-weapp
		        id="launch-btn"
		        appid="wx850d4fd5c640f9de"
		        path="pages/index/index"
				style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
		      <script type="text/wxtag-template">
				  <div style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0"></div>
		      </script>
		    </wx-open-launch-weapp>
		  </view>
	</view>
	<view v-else>
		出错了
	</view>
</template>

<script>
	import BannerView from '@/components/banner-view.vue'
	import Feed from '@/pages/feed/feed.vue'
	// import Home from '@/pages/home.vue'
	import { getWxConfigParams } from '@/api/shop.js'
	// #ifdef H5
	const jweixin = require('jweixin-module')
	// #endif
	import {
		mapState,
	} from 'vuex';
	export default {
		components: {
			BannerView,
			Feed,
			// Home
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
			}),
		},
		data() {
			return {
				// appType: 'app-p',
				btnShow: true
			}
		},
		onShow() {
		},
		onLoad() {
			this.titleDndTabberSet()
		},
		mounted() {
			this.titleDndTabberSet()
		},
		methods: {
			titleDndTabberSet() {
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					uni.setTabBarItem({
					  index: 1,
					  text: '在家',
					  visible: true
					})
				} else if (this.appType === 'app-p' || this.appType === 'mp-p') {
					uni.setNavigationBarTitle({
						title: '在家'
					})
					
					uni.setTabBarItem({
					  index: 1,
					  text: '在家',
					  visible: true
					})
					/* #ifdef H5 */
						// this.skipSmallProgram()
						this.btnShow = false
					/*#endif*/
					
					/*#ifdef MP-WEIXIN*/
					this.btnShow = true
					/*#endif*/
					this.skipSmallProgram()
				}
				
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					uni.setTabBarItem({
					  index: 0,
					  text: '园区',
					    visible: true
					})
					uni.setTabBarItem({
					  index: 1,
					  text: '班级圈',
					    visible: true
					})
				} else if (this.appType === 'app-p' || this.appType === 'mp-p') {
					let tabBar = '在园'
					if (this.channel === 'xxwbaby') {
						tabBar = '在托'
					}
					uni.setTabBarItem({
					  index: 0,
					  text: tabBar,
					    visible: true
					});
					uni.setTabBarItem({
					  index: 1,
					  text: '在家',
					  visible: true
					});
				}
			},
			fabClick() {
				let that = this;
				const isCourse = false;
				const category = '';
				const coursePlanId = '';
				uni.navigateTo({
					url: `/pages_base/feed/feed-publish?isCourse=${isCourse}&category=${category}&coursePlanId=${coursePlanId}`,
					events: {
						//发布成功
						pushSuccessEvent: function(data) {
							that.$refs.feed.getList(-1);
						},
					},
				})
			},
			
			albumClick() {
				this.$u.route({
					url: 'pages_operate/album/album-page'
				})
			},
			
			onPullDownRefresh() {
				console.log('onPullDownRefresh');
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					this.$refs.feed.refresh();
				} else {
					uni.stopPullDownRefresh();
				}
			},
			onReachBottom() {
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					this.$refs.feed.loadMore();
				}
			},
			
			async skipSmallProgram() {
				const { data : res } = await getWxConfigParams(encodeURIComponent(`${location.href.split('#')[0]}`))
				let that = this
				jweixin.config({
				  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				  appId: res.appId, // 必填，公众号的唯一标识
				  timestamp: res.timestamp, // 必填，生成签名的时间戳
				  nonceStr: res.nonceStr, // 必填，生成签名的随机串
				  signature: res.signature, // 必填，签名
				  jsApiList: ['wx-open-launch-weapp', 'chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
				  openTagList:['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
				});
				jweixin.ready(function() {
					
				});
				jweixin.error(function(res) {
				  console.log('res',res);
				  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				});
			},
			
			gotoMt() {
				uni.navigateToMiniProgram({
								  appId: 'wx850d4fd5c640f9de',//目标小程序appid
								  path: 'pages/index/index',//需要打开的目标路径
								  success(res) {
								    // 打开成功
								  }
				})
	
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}

	.tabbar{
		background-color: $app-page-bg-color;
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
		
		.action-view {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-top: 20rpx;
			
		
			.action-item {
				width: 330rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFFFFF;
				border-radius: 20rpx;
		
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
				line-height: 65rpx;
			}
		}

	}
	
	
	.btn-wx{
		padding: 20rpx 200rpx;
	}
</style>
